<template>
  <div :class="{'editMode':isEdit}" class="price-table-container">
    <el-table
      v-if="(tableData && tableData.length) || isEdit"
      :data="tableData"
      element-loading-text="加载中..."
      empty-text="暂无数据"
      header-cell-class-name="dynamic-edit-table-cell"
      border
      fit>
      <el-table-column align="right" label="价格表" prop="name" width="90px" class-name="priceRow">
        <template slot-scope="scope">
          {{ scope.row.name }}{{ scope.row.name === '含税' || scope.row.name === '刊例'?'(元)':'' }}
        </template>
      </el-table-column>
      <el-table-column align="center" label="策划价" prop="planPrice">
        <template slot-scope="scope">
          <div v-if="isEdit" :class="'planPrice' + scope.$index">
            <el-input
              v-model="scope.row.planPrice"
              :disabled="scope.row.disabled || disabled"
              :placeholder="placeHolderArr.planPrice[scope.$index]"
              oninput="if(value>999999999999)value=999999999999"
              type="number"
              size="small"
              @change="numberInputChange(scope, 'planPrice')"
              @mousewheel.native.prevent
            />
          </div>
          <div v-else class="read-content">
            {{ scope.row.planPrice }}
          </div>
        </template>
      </el-table-column>
      <el-table-column align="center" label="渠道价" prop="channelPrice">
        <template slot-scope="scope">
          <div v-if="isEdit">
            <el-input
              v-model="scope.row.channelPrice"
              :disabled="true"
              :placeholder="placeHolderArr.channelPrice[scope.$index]"
              oninput="if(value>999999999999)value=999999999999"
              type="number"
              size="small"
              @change="numberInputChange(scope, 'channelPrice')"
              @mousewheel.native.prevent
            />
          </div>
          <div v-else class="read-content">
            {{ scope.row.channelPrice }}
          </div>
        </template>
      </el-table-column>
      <el-table-column align="center" label="总价" prop="totalPrice">
        <template slot="header" slot-scope="scope">
          <div class="dynamic-table-header" style="justify-content: center;">
            <span v-if="isEdit" style="color: #f56c6c;margin-right:4px;">*</span>
            <span class="label">{{ scope.column.label }}</span>
          </div>
        </template>
        <template slot-scope="scope">
          <div
            v-if="isEdit"
            :class="{ 'isError': scope.$index !== 2 && errorIds.includes(`${scope.column.property}${scope.$index}`) }">
            <el-input
              :class="'totalPrice' + scope.$index"
              v-model="scope.row.totalPrice"
              :disabled="scope.row.disabled || disabled"
              :placeholder="placeHolderArr.totalPrice[scope.$index]"
              oninput="if(value>999999999999)value=999999999999"
              type="number"
              size="small"
              @change="numberInputChange(scope, 'totalPrice')"
              @mousewheel.native.prevent
            />
          </div>
          <div v-else class="read-content">
            {{ scope.row.totalPrice }}
          </div>
        </template>
      </el-table-column>
    </el-table>
    <empty-placeholder v-else :empty-img="emptyDataIcon" image-size="100px" style="margin-bottom: 24px" />
  </div>
</template>

<script>
import EmptyPlaceholder from '@/components/EmptyPlaceholder';
import emptyDataIcon from '@/assets/empty-data-icon.png';
export default {
  components: {
    EmptyPlaceholder
  },
  model: {
    prop: 'tableData',
    event: 'changeValue'
  },
  props: {
    isEdit: {
      type: Boolean,
      default: false
    },
    disabledTaxAmount: {
      type: Boolean,
      default: false
    },
    disabled: {
      type: Boolean,
      default: false
    },
    tableData: {
      type: Array,
      default: () => {
        return [];
      }
    }
  },
  data() {
    return {
      placeHolderArr: {
        planPrice: ['请输入含税策划价', '请输入刊例策划价', '=含税策划价/刊例策划价'],
        channelPrice: ['=含税总价-含税策划价', '=刊例总价-刊例策划价', '=含税渠道价/刊例渠道价'],
        totalPrice: ['请输入含税总价', '请输入刊例总价', '=含税总价/刊例总价']
      },
      emptyDataIcon,
      errorIds: [] // 'totalPrice0' 'totalPrice1'
    };
  },
  created() {
  },
  methods: {
    changeValue(value = null) {
      this.tableData.forEach(item => {
        Object.keys(item).forEach(key => {
          if (item[key] === '') {
            item[key] = null;
          }
        });
      });
      this.$emit('changeValue', value || this.tableData);
      this.errorIds = []; // 重制红框
    },
    numberInputChange(scope, key) {
      if (scope.row[key]) scope.row[key] = Number(scope.row[key]).toFixed(2);
      this.changeValue();
      this.countPrice();
    },
    countPrice() {
      this.tableData.forEach(item => {
        // 渠道价
        if ((item.planPrice === '--' && item.totalPrice === '--') || (!item.planPrice && item.planPrice !== 0 && !item.totalPrice && item.totalPrice !== 0)) {
          item.channelPrice = '';
        } else {
          const planPrice = Number(item.planPrice) || 0;
          const totalPrice = Number(item.totalPrice) || 0;
          item.channelPrice = Number(totalPrice - planPrice).toFixed(2);
        }
      });
      const arr = ['planPrice', 'channelPrice', 'totalPrice'];
      // 折扣
      arr.forEach(key => {
        if (this.tableData[0][key] === '0.00' || this.tableData[1][key] === '0.00') {
          this.tableData[2][key] = 0;
        } else {
          // this.tableData[2][key] = Number(Math.round(this.tableData[0][key] / this.tableData[1][key] * 100) / 100);
          const price1 = Number(this.tableData[0][key]);
          const price2 = Number(this.tableData[1][key]) || 0;
          if (price2 === 0) {
            this.tableData[2][key] = '';
          } else {
            this.tableData[2][key] = Number(Math.round(price1 / price2 * 100) / 100);
          }
        }
      });
    },
    validate() {
      return new Promise((resolve, reject) => {
        const dataList = this.tableData;
        const requiredKeys = ['totalPrice'];
        let isOk = true;
        const errorIds = [];
        if (dataList && dataList.length > 0) {
          dataList.forEach((i, index) => {
            requiredKeys.forEach((j, jindex) => {
              if (!i[j] && i[j] !== 0) {
                errorIds.push(`${j}${index}`);
                isOk = false;
              }
            });
          });
        }
        this.errorIds = errorIds;
        if (isOk) {
          resolve(true);
        } else {
          reject(false);
        }
      });
    }
  }
};
</script>

<style lang="scss" scoped>
.read-content {
  justify-content: center;
  display: flex;
  .overflow {
    display: inline-block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
}
.add-btn {
  width: 100%;
  height: 56px;
  border: 1px dashed #406EFF;
  border-radius: 4px;
  font-size: 16px;
  font-weight: 500;
  color: #406EFF;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
.price-table-container {
  margin-top: 20px;
  .dynamic-table-header {
    display:flex;align-items:center;
    .label {
      color: #141C3D;
      font-weight: 600;
    }
  }
  &::v-deep {
    .el-input.is-disabled .el-input__inner {
      background-color: #EFF3FB;
      color: #999999;
    }
    .el-cascader-menu__wrap {
      max-height: 204px !important;
    }
    .dynamic-edit-table-cell {
      background: #F9F9F9;
    }
    .el-table__fixed {
      &::before {
        background-color: transparent;
      }
    }
    .el-table__fixed-right {
      &::before {
        background-color: transparent;
      }
    }
    // .el-table--border::after {
    //   background-color: transparent;
    // }
    .el-table {
      // border-color: transparent;
      &::before {
        background-color: transparent;
      }
      // .el-table__body-wrapper {
      //   padding-bottom: 7px;
      // }
      thead {
        th>.cell {
          color: #141C3D!important;
          font-weight: 600!important;
        }
        th.dynamic-edit-table-cell {
          &:last-child {
            border-right-color: transparent;
          }
          &:nth-last-child(2) {
            border-right-color: transparent;
          }
        }
      }
      tbody {
        tr {
          td:last-child {
            border-right-color: transparent;
          }
        }
        .el-table__row {
          &:last-child {
            td {
              border-bottom: 1px solid #EBEEF5;
            }
          }
        }
      }
      .priceRow {
        background: #F9F9F9;
        color: #141C3D;
        font-weight: 600;
      }
    }
  }
  &.editMode {
    &::v-deep {
      .el-select__caret {
        color: #333;
      }
      .el-table__row {
        td {
          padding: 0;
          &:first-child {
            padding: 0 15px;
          }
        }
        .cell {
          padding: 0;
          .el-input__inner {
            height: 46px;
            border-radius: 0;
            border-color: transparent;
            text-align: center;
          }
        }
      }
    }
  }
}
.isError {
  &::v-deep {
    .el-input__inner {
      border-color: red !important;
    }
  }
}
</style>
